UI 設計交付文件大致有流程、規格、互動原型等三項：

1. 流程（flow）：
   一個功能會由許多的頁面組成，每個頁面會有互動機制，頁面與頁面之間的關係、流程(預期流程、非預期流程（error flow）、替代流程等等)，互動元件的反饋，（例如按鈕點擊之後的反饋），都是流程交付文件的必備品，也是工程師實作時的重要依據。

   

2. 規格（spec）：
   Design System 的內容是由大量的 component 、 variable 組合而成，再由這些 component、 variable（Design Token） 去組合、設計出完整的 UI，針對頁面的布局、位置、間距等，都必須做出規範文件，而每一個 component 的樣式（style）、狀態（state）也都有一定的規範。

3. 互動原型（prototype）：
   並不是每一個功能、每一個互動反饋都能用靜態的 flow 或 spec 去完成，有時候在溝通過程中必須讓團隊成員們（尤其是PM及工程師）清楚知道這個功能的互動效果及體驗（例如：區塊收合動畫、popup 彈出方式），這時候就必須做互動交付，也就是我們上一篇提到的 prototype。（總不能讓工程師自己通靈腦補吧？QQ）

我們以輸入框為例來實作看看：

1. 外觀：
   設計輸入框基本外觀：包括寬、高、內距、邊框、圓角、底色、字體、字級，並做出標註。

2. 狀態：
   將每個會出現的狀態情境全部表示出來（default、input、error、disabled），包括是否必填。

3. 布局（RWD）：
   在格線系統中或不同的介面環境下的組合排列，包括內距、間距等等。
   

好用的外掛：

當我們在做標註時，每條標註線、每個尺寸都一點一滴的慢慢畫出來，你一定會感到很厭世，希望自己像千手觀音一樣有很多手一起畫。來～來～來，介紹一個好用的 Plugin ： Redlines。它雖然有點老，但很好用。

1. 點擊下方工具列的 Plugin icon 按鈕
2. 點選 Plugins & Widgets 頁籤
3. 在上方搜尋框填入 Redlines，就會出現 Redlines 的 plugin
4. 點擊 Redlines，出現 Redlines 的設定彈窗。
5. 點選要標註的物件，再點選標註的位置（上標註、下標註、左標註、右標註）
6. 標註之後的尺寸不一定是我們想要的，例如：320PX 改成 100%，都可以自行修改喔！
   

一份完整的設計交付文件，除了上述的流程、規格、互動原型等三項之外，也會根據每個產品、每個團隊的需求而增修，是一個很大的工程。本篇以及之後的交付實作都會 focus 在規格（spec）這一項，其餘項目（flow、prototype）請各位捧油在您的專案中再去實作即可，我們就不再多著墨其餘項目了，必竟我們的終極目標是小小的「0～1的 Design System 之旅」，不是大大的「0～1 的 UI 全方位實作之旅」，哩供丟嘸丟啊！QQ

因為當初訂定的三十天挑戰單元很多（自己挖坑給自己跳），Figma 的基本功能與應用就到今天暫時告一段落，帶著這些基礎與概念，我們明天繼續朝下一個單元出發，Go ! Go ! Go !